<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Public/js/jquery-1.11.1.min.js"></script>
    <script src="../Public/js/bootstrap.min.js"></script>
    <link href="../Public/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /*重置*/
        html,body,ul,ul li{margin: 0;padding: 0;border:0;}
        ul{list-style: none;}
        ul a{display: block;text-decoration: none;}
        ul a:hover{text-decoration: underline;}

        html,body{
            background-image:url(../Photo/wood-bg.jpg);
        }
        .b{
            height: 180px;
            width: 180px;
            margin-left: -5px;
            margin-top: 10px;
        }
        .c{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            border: 1px solid gray;
            transform:rotate(-5deg)
        }
        .a{
            font-size: 20px;
            text-align: center;
        }
        .c1{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            border: 1px solid gray;
            transform:rotate(7deg)
        }
        .c2{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            border: 1px solid gray;
        }
        .c3{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            border: 1px solid gray;
            transform:rotate(10deg)
        }
        .c4{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            border: 1px solid gray;
            transform:rotate(4deg);
            transform-origin:5px 5px;
        }
        .c5{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            margin-bottom: 50px;
            border: 1px solid gray;
        }
        .c6{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            margin-bottom: 50px;
            border: 1px solid gray;
            transform:rotate(10deg)
        }
        .c7{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            margin-bottom: 50px;
            border: 1px solid gray;
            transform:rotate(-8deg);
            transform-origin:200px 200px;
        }
        .c8{
            background-color: #fff;
            height: 240px;
            width: 200px;
            margin-left: 150px;
            margin-top: 40px;
            margin-bottom: 50px;
            border: 1px solid gray;
        }

        .c8:hover{
            transform: scale(1.2,1.2);
        }
        .c7:hover{
            transform: scale(1.2,1.2);
        }
        .c6:hover{
            transform: scale(1.2,1.2);
        }
        .c5:hover{
            transform: scale(1.2,1.2);
        }
        .c4:hover{
            transform: scale(1.2,1.2);
        }
        .c3:hover{
            transform: scale(1.2,1.2);
        }
        .c2:hover{
            transform: scale(1.2,1.2);
        }
        .c1:hover{
            transform: scale(1.2,1.2);
        }
        .c:hover{
            transform: scale(1.2,1.2);
        }
    </style>
</head>
<body class="row">
<div class="i1">
    <div class="c col-xs-3">
        <img src="../Photo/image-01.jpg" class="b">
        <div class="a">Rocland!</div>
    </div>
</div>

<div class="i1">
    <div class="c1 col-xs-3">
        <img src="../Photo/image-02.jpg" class="b">
        <div class="a">Discussion!</div>
    </div>
</div>

<div class="i1">
    <div class="c2 col-xs-3">
        <img src="../Photo/image-03.jpg" class="b">
        <div class="a">A Hearty Laugh</div>
    </div>
</div>

<div class="i1">
    <div class="c1 col-xs-3">
        <img src="../Photo/image-04.jpg" class="b">
        <div class="a">Evil Matt Codling</div>
    </div>
</div>

<div class="i1">
    <div class="c3 col-xs-3">
        <img src="../Photo/image-05.jpg" class="b">
        <div class="a">Amada Glaros...</div>
    </div>
</div>

<div class="i1">
    <div class="c2 col-xs-3">
        <img src="../Photo/image-06.jpg" class="b">
        <div class="a">Scribble scribble..</div>
    </div>
</div>

<div class="i1">
    <div class="c col-xs-3">
        <img src="../Photo/image-07.jpg" class="b">
        <div class="a">The dacument</div>
    </div>
</div>

<div class="i1">
    <div class="c4 col-xs-3">
        <img src="../Photo/image-08.jpg" class="b">
        <div class="a">I see you!</div>
    </div>
</div>

<div class="i1">
    <div class="c5 col-xs-3">
        <img src="../Photo/image-09.jpg" class="b">
        <div class="a">Rock hard bolls</div>
    </div>
</div>

<div class="i1">
    <div class="c6 col-xs-3">
        <img src="../Photo/image-10.jpg" class="b">
        <div class="a">Bocce Ball</div>
    </div>
</div>

<div class="i1">
    <div class="c7 col-xs-3">
        <img src="../Photo/image-11.jpg" class="b">
        <div class="a">Boris "I love you"</div>
    </div>
</div>

<div class="i1">
    <div class="c8 col-xs-3">
        <img src="../Photo/image-12.jpg" class="b">
        <div class="a">Boris "I love you"</div>
    </div>
</div>

</body>
</html>